<template>
	<div class="monkeyKingWrap">
		<el-carousel :interval="15000" arrow="always" height="500px">
			<el-carousel-item v-for="item in 2" :key="item">
				<div class="mkTop">
					<div class="partWrap">
						<img class="part" v-for="url in imageData" :src="url.src" :key="url.src" />
					</div>
					<div class="svgImageWrap">
						<img class="svgImage" :src="svgBase64" />
					</div>
				</div>
			</el-carousel-item>
		</el-carousel>

		<div class="miniImageWrap">
			<div class="miniPartWrap" v-for="item in 3" :key="item">
				<img class="part" v-for="url in imageData" :src="url.src" :key="url.src" />
			</div>
		</div>
		<!-- 这里来放组件，什么组件，就是那些商城的组件 -->

		<el-container class="mainContainer">
			<el-aside width="200px">
				<el-menu default-active="/monkeyking/back" background-color="#000000" text-color="#fff"
					active-text-color="#fdfdfd" router>

					<el-menu-item>
						<i class="el-icon-document"></i>
						<span slot="title">我购买的</span>
					</el-menu-item>


					<el-menu-item index="/monkeyking/back/">
						<i class="el-icon-document"></i>
						<span slot="title">背景</span>
					</el-menu-item>

					<el-menu-item index="/monkeyking/head">
						<i class="el-icon-document"></i>
						<span slot="title">头部</span>
					</el-menu-item>

					<el-menu-item index="/monkeyking/goldring">
						<i class="el-icon-document"></i>
						<span slot="title">紧箍</span>
					</el-menu-item>

					<el-menu-item index="/monkeyking/ear">
						<i class="el-icon-document"></i>
						<span slot="title">耳朵</span>
					</el-menu-item>

					<el-menu-item index="/monkeyking/eyes">
						<i class="el-icon-document"></i>
						<span slot="title">眼睛</span>
					</el-menu-item>

					<el-menu-item index="/monkeyking/nose">
						<i class="el-icon-document"></i>
						<span slot="title">鼻子</span>
					</el-menu-item>

					<el-menu-item index="/monkeyking/mouth">
						<i class="el-icon-document"></i>
						<span slot="title">嘴巴</span>
					</el-menu-item>

					<el-menu-item index="/monkeyking/beard">
						<i class="el-icon-document"></i>
						<span slot="title">胡子</span>
					</el-menu-item>

				</el-menu>
			</el-aside>
			<el-main>
				<router-view></router-view>
			</el-main>

		</el-container>
		</el-container>
	</div>

</template>

<script>
	// let canvas;
	let ctx;
	let frameY = 0;
	export default {
		data() {
			return {
				// eyeSrc:"../assets/image/mk_eyes.png",
				orginBase64: 'data:application/json;base64,eyJuYW1lIjogIk1vbmtleUtpbmcgIzEiLCJkZXNjcmlwdGlvbiI6ICJNb25rZXlLaW5nIGlzIHRoZSBmaXJzdCBkZWNlbnRyYWwgcm9sZSBvZiAgRGVjZW50cmFsIFJvbGUgIExhYnMuIiAsICJpbWFnZSI6ICJkYXRhOmltYWdlL3N2Zyt4bWw7YmFzZTY0LFBITjJaeUI0Yld4dWN6MGlhSFIwY0RvdkwzZDNkeTUzTXk1dmNtY3ZNakF3TUM5emRtY2lJSEJ5WlhObGNuWmxRWE53WldOMFVtRjBhVzg5SW5oTmFXNVpUV2x1SUcxbFpYUWlJSFpwWlhkQ2IzZzlJakFnTUNBek5UQWdNelV3SWo0OGMzUjViR1UrTG1KaGMyVWdleUJtYVd4c09pQnphM2xpYkhWbE95Qm1iMjUwTFdaaGJXbHNlVG9nYzJWeWFXWTdJR1p2Ym5RdGMybDZaVG9nTVRWd2VEc2dmU0F1YzIxaGJHd2dleUJtYVd4c09pQjNhR2wwWlRzZ1ptOXVkQzFtWVcxcGJIazZJSE5sY21sbU95Qm1iMjUwTFhOcGVtVTZJRFJ3ZURzZ2ZUd3ZjM1I1YkdVK1BISmxZM1FnZDJsa2RHZzlJakl3TUhCNElpQm9aV2xuYUhROUlqRXdNQ1VpSUdacGJHdzlJbUpzWVdOcklpQXZQangwWlhoMElIZzlJakV3SWlCNVBTSXlNQ0lnWTJ4aGMzTTlJbUpoYzJVaVBrSnNkV1VnUlhsbFBDOTBaWGgwUGp4MFpYaDBJSGc5SWpFd0lpQjVQU0l5TmlJZ1kyeGhjM005SW5OdFlXeHNJajVVV1ZCRk9pQXhNQ0JVVDB0RlRrbEVPaUF4SUVOUFRsUlNRVU5VT2lBd2VHTmtPVGhsWXpFelptSTNOREF6T0RKa1pqRTNNbVl4WXpNNFpEVXpaalkzTWpVellXRmpZelE4TDNSbGVIUStQSFJsZUhRZ2VEMGlNVEFpSUhrOUlqTXlJaUJqYkdGemN6MGljMjFoYkd3aVBrbE5RVWRGT2lCUmJWZDVTMVkwV2xnMVZuSkhRa3QwUmpselEyVk9WWEZhU0VablZESm9ObmhpVnpOTFJETk5RMmN4YmtGdlBDOTBaWGgwUGp4MFpYaDBJSGc5SWpFd0lpQjVQU0l6T0NJZ1kyeGhjM005SW5OdFlXeHNJajVOUlZSQlJFRlVRVG9nUEM5MFpYaDBQangwWlhoMElIZzlJakV3SWlCNVBTSTFNaUlnWTJ4aGMzTTlJbUpoYzJVaVBrSnNkV1VnUldGeVBDOTBaWGgwUGp4MFpYaDBJSGc5SWpFd0lpQjVQU0kxT0NJZ1kyeGhjM005SW5OdFlXeHNJajVVV1ZCRk9pQXlNQ0JVVDB0RlRrbEVPaUF4SUVOUFRsUlNRVU5VT2lBd2VERmtOekUzTWpFM016WTRabU5oTWpZNVlXSXhZekUyTlRVNU1EazVNemMxTURNNU1UQmlOek04TDNSbGVIUStQSFJsZUhRZ2VEMGlNVEFpSUhrOUlqWTBJaUJqYkdGemN6MGljMjFoYkd3aVBrbE5RVWRGT2lCUmJWZDVTMVkwV2xnMVZuSkhRa3QwUmpselEyVk9WWEZhU0VablZESm9ObmhpVnpOTFJETk5RMmN4YmtGdlBDOTBaWGgwUGp4MFpYaDBJSGc5SWpFd0lpQjVQU0kzTUNJZ1kyeGhjM005SW5OdFlXeHNJajVOUlZSQlJFRlVRVG9nUEM5MFpYaDBQangwWlhoMElIZzlJakV3SWlCNVBTSTROQ0lnWTJ4aGMzTTlJbUpoYzJVaVBsSmxaQ0J1YjNWelpUd3ZkR1Y0ZEQ0OGRHVjRkQ0I0UFNJeE1DSWdlVDBpT1RBaUlHTnNZWE56UFNKemJXRnNiQ0krVkZsUVJUb2dNekFnVkU5TFJVNUpSRG9nTVNCRFQwNVVVa0ZEVkRvZ01IZzVZMlZpTXpZMk16RmpOelJoTm1ZM05XRTFZamd5T0RGbE1qRTFPV1JtT1RJNU1ERmpORGt6UEM5MFpYaDBQangwWlhoMElIZzlJakV3SWlCNVBTSTVOaUlnWTJ4aGMzTTlJbk50WVd4c0lqNUpUVUZIUlRvZ1VXMVhlVXRXTkZwWU5WWnlSMEpMZEVZNWMwTmxUbFZ4V2toR1oxUXlhRFo0WWxjelMwUXpUVU5uTVc1QmJ6d3ZkR1Y0ZEQ0OGRHVjRkQ0I0UFNJeE1DSWdlVDBpTVRBeUlpQmpiR0Z6Y3owaWMyMWhiR3dpUGsxRlZFRkVRVlJCT2lBOEwzUmxlSFErUEhSbGVIUWdlRDBpTVRBaUlIazlJakV4TmlJZ1kyeGhjM005SW1KaGMyVWlQbEpsWkNCdWIzVnpaVHd2ZEdWNGRENDhkR1Y0ZENCNFBTSXhNQ0lnZVQwaU1USXlJaUJqYkdGemN6MGljMjFoYkd3aVBsUlpVRVU2SURRd0lGUlBTMFZPU1VRNklERWdRMDlPVkZKQlExUTZJREI0TTJNeU1tVTBNVE0zTjJReU1EQXpOV0ZrTWpBek56azBOekUzWm1VeE5XWTNOelE0Tm1Wa1pUd3ZkR1Y0ZEQ0OGRHVjRkQ0I0UFNJeE1DSWdlVDBpTVRJNElpQmpiR0Z6Y3owaWMyMWhiR3dpUGtsTlFVZEZPaUJSYlZkNVMxWTBXbGcxVm5KSFFrdDBSamx6UTJWT1ZYRmFTRVpuVkRKb05uaGlWek5MUkROTlEyY3hia0Z2UEM5MFpYaDBQangwWlhoMElIZzlJakV3SWlCNVBTSXhNelFpSUdOc1lYTnpQU0p6YldGc2JDSStUVVZVUVVSQlZFRTZJRHd2ZEdWNGRENDhkR1Y0ZENCNFBTSXhNQ0lnZVQwaU1UUTRJaUJqYkdGemN6MGlZbUZ6WlNJK1VtVmtJRzV2ZFhObFBDOTBaWGgwUGp4MFpYaDBJSGc5SWpFd0lpQjVQU0l4TlRRaUlHTnNZWE56UFNKemJXRnNiQ0krVkZsUVJUb2dOVEFnVkU5TFJVNUpSRG9nTVNCRFQwNVVVa0ZEVkRvZ01IZ3lZbU5tWWpjMk5HUTRNVFEwTldNeE16RmxZelUyTkRBMVpEVTFNREkzWkRJeU5HUTVNR05rUEM5MFpYaDBQangwWlhoMElIZzlJakV3SWlCNVBTSXhOakFpSUdOc1lYTnpQU0p6YldGc2JDSStTVTFCUjBVNklGRnRWM2xMVmpSYVdEVldja2RDUzNSR09YTkRaVTVWY1ZwSVJtZFVNbWcyZUdKWE0wdEVNMDFEWnpGdVFXODhMM1JsZUhRK1BIUmxlSFFnZUQwaU1UQWlJSGs5SWpFMk5pSWdZMnhoYzNNOUluTnRZV3hzSWo1TlJWUkJSRUZVUVRvZ1BDOTBaWGgwUGp4MFpYaDBJSGc5SWpFd0lpQjVQU0l4T0RBaUlHTnNZWE56UFNKaVlYTmxJajQ4TDNSbGVIUStQQzl6ZG1jKyJ9',
				svgBase64: '',
				datas: [{
					address: "0x00000000000000000000000000000",
					tokenID: "1",
					type: "back",
				}, {
					address: "0x00000000000000000000000000000000",
					tokenID: "1",
					type: "Head",
				}, {
					address: "0x00000000000000000000000000000000",
					tokenID: "1",
					type: "Hoop",
				}, {
					address: "0x00000000000000000000000000000000",
					tokenID: "1",
					type: "ears",
				}, {
					address: "0x00000000000000000000000000000000",
					tokenID: "1",
					type: "eyes",
				}, {
					address: "0x00000000000000000000000000000000",
					tokenID: "1",
					type: "nose",
				}, ],
				// https://s1.hdslb.com/bfs/seed/bplus-common/dynamic-assets/end.png 可以渲染本地 ，不可以渲染远程。
				imageData: [{
						src: require("../assets/image/red0913/1-1.png")
					},
					{
						src: require("../assets/image/red0913/2-1.png")
					},
					{
						src: require("../assets/image/red0913/2-2.png")
					},
					{
						src: require("../assets/image/red0913/2-3.png")
					},
					{
						src: require("../assets/image/red0913/2-4.png")
					},
					{
						src: require("../assets/image/red0913/2-5.png")
					},
					{
						src: require("../assets/image/red0913/3-2.png")
					},
					{
						src: require("../assets/image/red0913/3-3.png")
					},
					{
						src: require("../assets/image/red0913/3-4.png")
					},
				]
			};
		},

		mounted() {
			// this.initCanvas();
			// this.renderImage();
			console.log("生命周期 mounted");
			setTimeout(()=>{
				this.loadOtherHtml()
			},2)
		},

		methods: {
			initCanvas() {
				canvas = document.querySelector('#canvas');
				ctx = canvas.getContext('2d');
				canvas.width = 2000;
				canvas.height = 2000;
			},

			loadOtherHtml() {
				// image
				let data = this.orginBase64.substring(29, this.orginBase64.length);
				// console.log(data);

				let decode = window.atob(data);
				// console.log("decode==="+decode);

				let mKobj = JSON.parse(decode);

				// 字符串转对象。
				console.log(mKobj.image);

				this.svgBase64 = mKobj.image;
			},

			renderImage() {
				let back = 'https://ipfs.io/ipfs/QmRsLEzRLYDBdN743rhrp6jKTR3Lcqx5LGXrh9VCszsZ48?filename=mk_back.png';
				// let src="../assets/image/mk_eyes.png";
				this.doDraw(back, canvas);
				// let backimg = new Image()
				// backimg.src = back
				// //  加载图片
				// backimg.onload = function() {
				// 	console.log("加载图片");
				// 	if (backimg.complete) {
				// 		//  绘制图片
				// 		// ctx.drawImage(backimg, 0, 0, 500, 500);
				// 	}
				// }

				let head = 'https://ipfs.io/ipfs/QmdJJJAZYmXB79vHj789sYPut3nUt23DnNnUdEmid1D6Qi?filename=mk_head.png';
				this.doDraw(head, canvas);
				// let headimg = new Image()
				// headimg.src = head

				// headimg.onload = function() {
				// 	if (headimg.complete) {
				// 		// ctx.drawImage(headimg, 0, 0, 500, 500);
				// 	}
				// }

				let GoldenHoop =
					'https://ipfs.io/ipfs/QmeS6f5ht6Dd64Bv33uFERE17Y5yBLTMin51sKuckx2CMb?filename=mk_GoldenHoop.png';
				this.doDraw(GoldenHoop, canvas)
				// let GoldenHoopimg = new Image()
				// GoldenHoopimg.src = GoldenHoop
				// GoldenHoopimg.onload = function() {
				// 	console.log("加载图片");
				// 	if (GoldenHoopimg.complete) {
				// 		//  绘制图片
				// 		// ctx.drawImage(GoldenHoopimg, 0, 0, 500, 500);
				// 	}
				// }

				let eyes = 'https://ipfs.io/ipfs/QmPJmH5L7BW2MwWqGWSAUbrrGSKKpatZpiD2bjJ7M35nTv?filename=mk_eyes.png';
				this.doDraw(eyes, canvas);
				// let eyesimg = new Image()
				// eyesimg.src = eyes
				// //  加载图片
				// eyesimg.onload = function() {
				// 	console.log("加载图片");
				// 	if (eyesimg.complete) {
				// 		//  绘制图片
				// 		// ctx.drawImage(eyesimg, 0, 0, 500, 500);
				// 	}
				// }
			},

			//  imageUrl为后台提供图片地址
			doDraw(imageUrl, canvas) {
				//  可以理解为一个画笔，可画路径、矩形、文字、图像
				let ctx = canvas.getContext('2d')
				let img = new Image()
				img.src = imageUrl
				//  加载图片
				img.onload = function() {
					console.log("加载图片");
					if (img.complete) {
						//  绘制图片
						ctx.drawImage(img, 0, 0, 2000, 2000);
					}
				}
				img.onerror = function() {
					console.log("加载图片失败");
				}
			},
		},

		// <img class="part" src="../assets/image/red0913/2-1.png"> <!-- 耳朵 -->
		//  <img class="part" src="../assets/image/red0913/2-1.png"> <!-- 耳朵 -->
		//  <img class="part" src="../assets/image/red0913/2-2.png"> <!-- 胡子 -->
		//  <img class="part" src="../assets/image/red0913/2-3.png"> <!-- 头部 -->
		//  <img class="part" src="../assets/image/red0913/2-4.png"> <!-- 脸部 -->
		//  <img class="part" src="../assets/image/red0913/2-5.png"> <!-- 紧箍 -->
		//  <img class="part" src="../assets/image/red0913/3-2.png"> <!-- 眼睛 -->
		//  <img class="part" src="../assets/image/red0913/3-3.png"> <!-- 鼻子 -->
		//  <img class="part" src="../assets/image/red0913/3-4.png"> <!-- 嘴巴-->
	};
</script>


<style scoped lang="less">
	.mkTop {
		margin: 0 auto;
		width: 1000px;
		height: 1050px;
		transform: translate(50px);
	}



	.partWrap {
		height: 470px;
		width: 470px;
		position: relative;
		float: left;
		margin: 0px 30px 0px 0px;

	}

	.svgImageWrap {
		float: left;
		position: relative;
		width: 400px;
		height: 460px;
		border: 2px solid white;
		border-radius: 10px;
		overflow: hidden;	
	}
	
	.svgImage{
		height: 850px;
	}

	.miniImageWrap {
		margin: 0px auto;
		width: 800px;
		height: 100px;
		background-color: #191919;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 10px;
	}

	.miniPartWrap {
		height: 70px;
		width: 70px;
		border-radius: 10px;
		position: relative;
		overflow: hidden;
		border: 2px solid whitesmoke;
		margin: 10px;
	}

	.part {
		height: 100%;
		width: 100%;
		position: absolute;
	}

	.info {
		height: 80px;
		width: 430px;
		padding: 20px;
		background-color: #621219;
		border-radius: 5px;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		margin: 0px 25px 55px 0px;
		float: left;
	}

	.mainContainer {
		height: 100vh;
	}

	.el-aside {
		background-color: #000000;
		color: #d3dce6;
		text-align: center;
		line-height: 200px;
	}

	.el-main {
		background-color: #000000;
		color: #d3dce6;
		text-align: center;
	}
</style>
